import React, {Component} from 'react'
import AlloyTouch from 'AlloyTouch';
//let alloytouch = require("alloytouch");
import Transform from 'css3transform';
// import { connect } from 'dva';
 import { wrapper, target } from './CanChangeScrollX.less';

class CanChangeScrollX extends Component {
    constructor(props) {
        super(props);
        this.state = {
        };
        this.scrollTarget=null;
    }

    componentWillUnmount(){
        this.scrollTarget=null;
    }



    componentDidMount() {
        Transform(this.targetName,true);
        // let target = document.querySelector("#scroller");
        //Transform(target,true);
        this.scrollTarget= new AlloyTouch({
            touch:`#${this.props.wrapperId}`,//反馈触摸的dom
            target: this.targetName, //运动的对象
            vertical: false,
            // property: "translateY",  //被运动的属性
            min: -1000000, //不必需,运动属性的最小值,越界会回弹
            //  max: 0, //不必需,滚动属性的最大值,越界会回弹
            // vertical: true,//不必需，默认是true代表监听竖直方向touch
            sensitivity: 1,//不必需,触摸区域的灵敏度，默认值为1，可以为负数
            factor: 1,//不必需,表示触摸位移与被运动属性映射关系，默认值是1
            // step: 45,//不必需，用于校正到step的整数倍
            // preventDefault:document.getElementById("#wrapperScrollUseMy"),
            change:(e,value)=>{
                //  console.log(e);
                //this.handleScroll(e);
                //console.log(this.props);
                // window.dispatchEvent(new Event('resize'));
                //window.dispatchEvent(new Event('scroll'));
                // if(this.targetName!=undefined){
                //     let wrap = document.getElementById(this.props.wrapperId);
                //     if(parseFloat(wrap.offsetHeight) >= parseFloat(this.targetName.offsetHeight) && this.scrollTarget.min!=0){
                //         //   console.log(1);
                //         this.scrollTarget.min=0;
                //     }else if(parseFloat(wrap.offsetHeight) < parseFloat(this.targetName.offsetHeight)){
                //         let sch = parseFloat(wrap.offsetHeight)-parseFloat(this.targetName.offsetHeight);
                //         if(this.scrollTarget.min!=sch){
                //             this.scrollTarget.min=parseFloat(wrap.offsetHeight)-parseFloat(this.targetName.offsetHeight);
                //         }
                //     }
                //     //  console.log(wrap.offsetHeight-this.targetName.offsetHeight-100);
                //     // this.scrollTarget.min=parseFloat(window.innerHeight)-bottomHeight-bottomHeight-parseFloat(this.targetName.offsetHeight);
                // }

                // if(e<scrollTarget.min){
                //     scrollTarget.to(parseFloat(window.innerHeight)-bottomHeight-parseFloat(this.targetName.offsetHeight), 100);
                // }
                //   console.log(this.to);
                //  this.to(window.innerHeight-bottomHeight-this.target.offsetHeight, 100);
            }, //不必需，属性改变的回调。alloytouch.css版本不支持该事件
            touchStart:(e,value)=>{
                let wrap = document.getElementById(this.props.wrapperId);
                let sch = parseFloat(wrap.offsetWidth)-parseFloat(this.targetName.offsetWidth);
                if(this.scrollTarget.min!=sch){
                    this.scrollTarget.min=sch;
                }
                //console.log(value);
                //console.log(scrollTarget.min);

                //  scrollTarget.min=parseFloat(window.innerHeight)-bottomHeight-parseFloat(this.targetName.offsetHeight);
                //  console.log(scrollTarget.min);
            },
            touchMove:(e,value)=>{
                //console.log(value);
                // scrollTarget.min=parseFloat(window.innerHeight)-bottomHeight-parseFloat(this.targetName.offsetHeight);
                if(value<this.scrollTarget.min){
                    // this.scrollTarget.to(parseFloat(window.innerHeight)-parseFloat(this.targetName.offsetHeight), 600);
                }
                //   console.log(this.to);
                //  this.to(window.innerHeight-bottomHeight-this.target.offsetHeight, 100);
            },
            touchEnd:(e,value)=>{
               // console.log(value);
                //  console.log(value);
                //   console.log(scrollTarget.min);
                // if(value<scrollTarget.min){
                //    scrollTarget.to(parseFloat(window.innerHeight)-bottomHeight-parseFloat(this.targetName.offsetHeight), 100);
                //    }
                //
                //  console.log(scrollTarget.to);
                //  scrollTarget.min=window.innerHeight-bottomHeight-this.targetName.offsetHeight;
            },
            // animationEnd:function(value){  } //运动结束
            property: "translateX",  //被滚动的属性
            //  sensitivity: 1,//不必需,触摸区域的灵敏度，默认值为1，可以为负数
            // factor: 1,//不必需,默认值是1代表touch区域的1px的对应target.y的1
            //  min: - 3000, //不必需,滚动属性的最小值
            max: 0, //不必需,滚动属性的最大值
            step: 50,
            animationEnd: function (value) {
                //   console.log(this.to);
                // this.to(window.innerHeight-bottomHeight-this.target.offsetHeight, 100);
                //console.log(value);
            },
            pressMove: function (value) {


                //   console.log(scrollTarget.min);
                // scrollTarget.min=window.innerHeight-bottomHeight-this.targetName.offsetHeight;

            },
            bindSelf:false
        });

        this.props.getAlloyTouch(this.scrollTarget);

    }

    render() {
        const { className='', style, wrapperId, targetId, tagetClass, targetStyle } = this.props;

        return (
            <div
                id={wrapperId}
                className={ `${className} ${wrapper}` }
                style={style}
            >
                <div className={`${tagetClass} ${target}`} style={targetStyle} id={targetId} ref={ref=>this.targetName=ref}>
                    {this.props.children}
                </div>
            </div>
        )
    }
}

CanChangeScrollX.defaultProps = {
    getAlloyTouch: () => {},
    wrapperId:'CanChangeScrollWraperId',
    targetId:'CanChangeScrollTargetId'
};

export default CanChangeScrollX;

/*
 * 自定义滚动组件和MyScroll功能一样，唯一不同id可以配置，为解决id重复为题
 * */
